import React, { PureComponent } from 'react';
import { getNowPalyFilmsList,getComingSoonFilmList } from './api';
import { Route,Switch,Redirect } from 'react-router-dom';
import MyLink from '../../components/MyLink';
import { StyleSelect } from './styled';
import Swipper from './components/Swipper';
import Nowplay from './components/Nowplay';
import Comingsoon from './components/Comingsoon';
class films extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      nowdata: [],
      comingdata:[],
      select:'0'
    }
  }
  
  setSelect = (val) => {
    this.setState({ select: val })
  }

  getNowPalyFilmsList = () => {
    getNowPalyFilmsList().then(res => {
      this.setState({
        nowdata: res.data.films,
      })
    })
  }
  getComingSoonFilmsList = () => {
    getComingSoonFilmList().then(res => {
      this.setState({
        comingdata: res.data.films,
      })
    })
  }
  componentDidMount() {
    this.getNowPalyFilmsList();
    this.getComingSoonFilmsList();
    if (this.props.location.pathname === '/films/comingsoonfilms') {
      this.setState({
        select:'1'
      })
    }
    if (this.props.location.pathname === '/films/nowplayfilms'){
      this.setState({
        select:'0'
      })
    }
  }
  render() {
    let { nowdata, comingdata, select } = this.state;
    return (
      <div>
        <Swipper></Swipper>
        <StyleSelect>
          <MyLink style={{flex:'1',textAlign:'center'}} to='/films/nowplayfilms' click={()=>{this.setSelect('0')}}><span style={select==='0'?{color:'#ff5f16'}:{}}>正在热映</span></MyLink>
          <MyLink style={{ flex: '1', textAlign: 'center' }} to='/films/comingsoonfilms' click={() => { this.setSelect('1') }}><span style={select==='1' ? { color: '#ff5f16' } : {}}>即将上映</span></MyLink>
        </StyleSelect>
        {/* <ul style={{marginLeft:'0.15rem',boxSizing:'content-box'}}> */}
          <Switch>
            <Route path='/films/nowplayfilms' render={()=> <Nowplay data={nowdata} />}></Route>
            <Route path='/films/comingsoonfilms' render={() => <Comingsoon data={comingdata} />}></Route>
            <Redirect from='/films' to='/films/nowplayfilms'></Redirect>
          </Switch> 
        {/* </ul> */}
      </div>
    );
  }
}

export default films;